iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 1 留言 1149 瀏覽

鐵人賽影片教學 DAY 30

Nuxt 3 快速入門系列第 30 篇

技術 [影片教學] Nuxt 3 部署網站服務

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 Nuxt 3 網站部署至 Vercel 流程前往 Verc...

Ryan ‧ 2023-10-15

0 Like 1 留言 1527 瀏覽

鐵人賽 Vue.js DAY 30

Nuxt 3 實戰筆記系列第 30 篇

技術 [Day 30] Nuxt 3 版本的升級與套件升級的管理工具

Nuxt 3 版本的升級目前 Nuxt 3 仍積極的在修正錯誤與添加新功能，版本更新的速度也不慢，相較去年底，目前正式版釋出後已經穩定許多，與其他大型的開源框...

Ryan ‧ 2023-10-15 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 651 瀏覽

鐵人賽影片教學 DAY 29

Nuxt 3 快速入門系列第 29 篇

技術 [影片教學] Nuxt 3 部署前的建構打包

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。建構打包專案使用 Nuxt CLI 的 build 指令來...

Ryan ‧ 2023-10-14

0 Like 0 留言 1896 瀏覽

鐵人賽 Vue.js DAY 29

Nuxt 3 實戰筆記系列第 29 篇

技術 [Day 29] Nuxt 3 混合渲染 (Hybrid Rendering) 中的 SWR 與 ISR

前言 Nuxt 3 除了是一個 SSR 的框架外，也能允許網頁使用混合渲染 (Hybrid Rendering)，混合渲染允許使用路由路徑的規則來決定不同的渲染...

Ryan ‧ 2023-10-14 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 806 瀏覽

鐵人賽影片教學 DAY 28

Nuxt 3 快速入門系列第 28 篇

技術 [影片教學] Nuxt 3 視覺化開發工具 Nuxt DevTools

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。展示專案我們使用實戰部落格系列所開發的範例程式碼：http...

Ryan ‧ 2023-10-13

0 Like 1 留言 1581 瀏覽

鐵人賽 Vue.js DAY 28

Nuxt 3 實戰筆記系列第 28 篇

技術 [Day28] Nuxt 3 建構打包與部署至 Cloudflare Workers

前言 Nuxt 3 的網站應用程式，可以根據實際業務需求來決定渲染的模式，而最終專案所建構打包的專案程式碼，也會因為模式的選擇而需要部署在不同的執行環境上，例如...

Ryan ‧ 2023-10-13 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 644 瀏覽

鐵人賽影片教學 DAY 27

Nuxt 3 快速入門系列第 27 篇

技術 [影片教學] Nuxt 3 SEO 搜尋引擎最佳化 - 實戰部落格系列 Part 5

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。添加網站頁面的標題調整 ./app.vue 檔案： &lt...

Ryan ‧ 2023-10-12

2 Like 1 留言 1385 瀏覽

鐵人賽 Vue.js DAY 27

Nuxt 3 實戰筆記系列第 27 篇

技術 [Day 27] Nuxt 3 產生靜態網頁部署至 Cloudflare Pages 與持續自動部署

前言 Nuxt 3 的渲染模式，可以支援我們產生靜態的頁面，而這些預渲染的靜態網頁檔案，就很適合部署至靜態的託管平台來服務，例如 Cloudflare Page...

Ryan ‧ 2023-10-12 ‧團隊啾嚕咕嚕跳起來

0 Like 1 留言 972 瀏覽

鐵人賽影片教學 DAY 26

Nuxt 3 快速入門系列第 26 篇

技術 [影片教學] Nuxt 3 路由頁面的權限判斷 - 實戰部落格系列 Part 4

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。建立路由中間件在 middleware 目錄下建立一個檔案...

Ryan ‧ 2023-10-11

0 Like 0 留言 2455 瀏覽

鐵人賽 Vue.js DAY 26

Nuxt 3 實戰筆記系列第 26 篇

技術 [Day 26] Nuxt 3 錯誤頁面 (Error Page) 與錯誤處理 (Error handling)

前言網站開發過程與上正式環境後，難免會遇到一些 Bug 導致網站處理邏輯發生異常，甚至一小段的 JavaScript 的邏輯錯誤或未處理的拋出錯誤，可能導致整...

Ryan ‧ 2023-10-11 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 626 瀏覽

鐵人賽影片教學 DAY 25

Nuxt 3 快速入門系列第 25 篇

技術 [影片教學] Nuxt 3 Server API 權限判斷與串接 - 實戰部落格系列 Part 3

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。建立伺服器中間件在 server/middleware 目...

Ryan ‧ 2023-10-10

0 Like 0 留言 2295 瀏覽

鐵人賽 Vue.js DAY 25

Nuxt 3 實戰筆記系列第 25 篇

技術 [Day 25] Nuxt 3 深入靜態資源的使用 Public & Assets

前言不管在 Vue 與 Nuxt 的開發，常會有需要使用圖片或靜態資源的時刻，例如，已經具有外部的圖片連結，我們很輕易的可以使用 URL 等方式來做載入，若是...

Ryan ‧ 2023-10-10 ‧團隊啾嚕咕嚕跳起來

2 Like 1 留言 779 瀏覽

鐵人賽影片教學 DAY 24

Nuxt 3 快速入門系列第 24 篇

技術 [影片教學] Nuxt 3 建立部落格文章相關 API - 實戰部落格系列 Part 2

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。建立 Neon Serverless Postgres 資料...

Ryan ‧ 2023-10-09

0 Like 1 留言 1858 瀏覽

鐵人賽 Vue.js DAY 24

Nuxt 3 實戰筆記系列第 24 篇

技術 [Day 24] Nuxt 3 多國語系模組 Nuxt I18n 的進階使用方法與 SEO 搜尋引擎最佳化

前言 Nuxt 3 整合 Vue I18n v9.x 多國語系的模組 Nuxt I18n，已經在 RC 階段準備釋出正式版，在使用上也穩定不少，這篇文章將介紹一...

Ryan ‧ 2023-10-09 ‧團隊啾嚕咕嚕跳起來

1 Like 0 留言 809 瀏覽

鐵人賽影片教學 DAY 23

Nuxt 3 快速入門系列第 23 篇

技術 [影片教學] Nuxt 3 建立第一個網站 - 實戰部落格系列 Part 1

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。建立預設布局模板與路由頁面在 layouts 目錄下建立一...

Ryan ‧ 2023-10-08

0 Like 0 留言 2708 瀏覽

鐵人賽 Vue.js DAY 23

Nuxt 3 實戰筆記系列第 23 篇

技術 [Day 23] Nuxt 3 多國語系模組 Nuxt I18n 的初入門與基本使用方法

前言 Nuxt 3 整合 Vue I18n v9.x 多國語系的模組 Nuxt I18n，已經在 RC 階段準備釋出正式版，在使用上也穩定不少，這篇文章將簡單的...

Ryan ‧ 2023-10-08 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 458 瀏覽

鐵人賽影片教學 DAY 22

Nuxt 3 快速入門系列第 22 篇

技術 [影片教學] Nuxt 3 靜態資源的管理 - Public & Assets

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。 Public 目錄在 Nuxt 3 的專案根目錄下，存在一...

Ryan ‧ 2023-10-07

0 Like 0 留言 1575 瀏覽

鐵人賽 Vue.js DAY 22

Nuxt 3 實戰筆記系列第 22 篇

技術 [Day 22] Nuxt 3 使用 SVG 的解決方案與更方便的使用 Icon 圖示

前言網站的介面多多少少會放置圖示 (Icon)，圖示的載入方式可以像圖片一樣以 png、jpg、webp 或 svg 等圖片格式來呈現，本篇將介紹如何在 Nu...

Ryan ‧ 2023-10-07 ‧團隊啾嚕咕嚕跳起來

1 Like 0 留言 969 瀏覽

鐵人賽影片教學 DAY 21

Nuxt 3 快速入門系列第 21 篇

技術 [影片教學] Nuxt 3 使用 I18n 建立多國語系

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。配置 Nuxt I18n 安裝 Nuxt I18n 套件 n...

Ryan ‧ 2023-10-06

0 Like 0 留言 1121 瀏覽

鐵人賽 Vue.js DAY 21

Nuxt 3 實戰筆記系列第 21 篇

技術 [Day 21] Nuxt 3 管理網站結構化資料標記 (Structured Data Markup) - SEO 搜尋引擎最佳化系列工具簡介

前言在搜尋引擎最佳化 SEO 中，其中有一個最佳化項目是結構化資料標記 (Structured Data Markup)，當你的網站設定好結構化的資料，將有助...

Ryan ‧ 2023-10-06 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 1020 瀏覽

鐵人賽影片教學 DAY 20

Nuxt 3 快速入門系列第 20 篇

技術 [影片教學] Nuxt 3 Cookie 的設置與使用

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。使用 useCookie 來設定 Cookie 在 page...

Ryan ‧ 2023-10-05

0 Like 0 留言 957 瀏覽

鐵人賽 Vue.js DAY 20

Nuxt 3 實戰筆記系列第 20 篇

技術 [Day 20] Nuxt 3 管理網站的 robots.txt 與 Robots Tags - SEO 搜尋引擎最佳化系列

前言搜尋引擎之所以能搜尋到世界各底的網頁，全歸功於網路爬蟲 (Web crawler)，也有人稱之為網路蜘蛛 (Spider)，爬蟲是一種機器人即是搜尋引擎檢...

Ryan ‧ 2023-10-05 ‧團隊啾嚕咕嚕跳起來

1 Like 1 留言 1429 瀏覽

鐵人賽影片教學 DAY 19

Nuxt 3 快速入門系列第 19 篇

技術 [影片教學] Nuxt 3 串接 Google OAuth 登入

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。建立 Google OAuth 用戶 ID 前往 Googl...

Ryan ‧ 2023-10-04

0 Like 0 留言 1098 瀏覽

鐵人賽 Vue.js DAY 19

Nuxt 3 實戰筆記系列第 19 篇

技術 [Day 19] Nuxt 3 自動產生 Sitemap 網站地圖 - SEO 搜尋引擎最佳化系列

前言 Sitemap 網站地圖基本上都是由網頁開發人員進行製作，網站地圖內容包含了整個網站的連結，例如你的網站有首頁、文章列表、文章詳細頁面等，這些連結如果你想...

Ryan ‧ 2023-10-04 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 634 瀏覽

鐵人賽影片教學 DAY 18

Nuxt 3 快速入門系列第 18 篇

技術 [影片教學] Nuxt 3 Runtime Config & App Config

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。使用 Runtime Config 開啟專案下 nuxt.c...

Ryan ‧ 2023-10-03

0 Like 0 留言 1451 瀏覽

鐵人賽 Vue.js DAY 18

Nuxt 3 實戰筆記系列第 18 篇

技術 [Day 18] Nuxt 3 自動產生連結縮圖 OG Image - SEO 搜尋引擎最佳化系列

前言在做網頁的 SEO 搜尋引擎最佳化時，你可以在 og:image 或 twitter:image 設定圖片的網址，來讓搜尋引擎爬蟲收錄網頁縮圖或在分享連結...

Ryan ‧ 2023-10-03 ‧團隊啾嚕咕嚕跳起來

1 Like 0 留言 1372 瀏覽

鐵人賽影片教學 DAY 17

Nuxt 3 快速入門系列第 17 篇

技術 [影片教學] Nuxt 3 使用 Pinia 進行狀態管理

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。安裝 Pinia 與 Nuxt Pinia 模組在專案中安...

Ryan ‧ 2023-10-02

0 Like 1 留言 1889 瀏覽

鐵人賽 Vue.js DAY 17

Nuxt 3 實戰筆記系列第 17 篇

技術 [Day 17] Nuxt 3 頁面載入效果 - 使用 NuxtLoadingIndicator 元件與實作自訂 Loading 元件

前言當路由頁面跳轉時，可能會因為下一個頁面阻塞而導致畫面卡住，使用者無法得知頁面的載入狀況，Nuxt 3 提供一個 <NuxtLoadingIndica...

Ryan ‧ 2023-10-02 ‧團隊啾嚕咕嚕跳起來

2 Like 0 留言 1515 瀏覽

鐵人賽 Vue.js DAY 16

Nuxt 3 實戰筆記系列第 16 篇

技術 [Day 16] Nuxt 3 最佳管理 Meta Tag 的方式 - 使用 useSeoMeta 與 useServerSeoMeta

前言在 Nuxt 3 我們可以使用 useHead 來設定 Meta Tag，你可以完全的掌握與控制 Meta 標籤的撰寫，不過為了應付各個平台或眾多的自訂標...

Ryan ‧ 2023-10-01 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 508 瀏覽

鐵人賽影片教學 DAY 16

Nuxt 3 快速入門系列第 16 篇

技術 [影片教學] Nuxt 3 狀態管理 (State Management)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。建立路由頁面在 pages 目錄下建立一個檔案 ./pag...

Ryan ‧ 2023-10-01